/* 样式重置 */
/* #ifndef MP-WEIXIN */
* {
	box-sizing: border-box;
}

ul {
	padding-left: 0;
}

li {
	list-style: none;
}
/* #endif */

/* 全局的CSS样式 */

/* margin & padding 原子化处理 */
.m-ma-auto{
	margin: auto;
	&__i{
		margin: auto !important;
	}
}
.m-ml-auto{
	margin-left: auto;
	&__i{
		margin-left: auto !important;
	}
}
.m-mr-auto{
	margin-right: auto;
	&__i{
		margin-right: auto !important;
	}
}
.m-mt-auto{
	margin-top: auto;
	&__i{
		margin-top: auto !important;
	}
}
.m-mb-auto{
    margin-bottom: auto;
	&__i{
    	margin-bottom: auto !important;
	}
}

@for $i from 0 through 200 {
	@if $i % 2 == 0 or $i % 5 == 0 {
		.m-ma-#{$i} {
			margin: $i + rpx;
			&__i {
				margin: $i + rpx !important;
			}
		}
		.m-mt-#{$i} {
			margin-top: $i + rpx;
			&__i {
				margin-top: $i + rpx !important;
			}
		}
		.m-mb-#{$i} {
			margin-bottom: $i + rpx;
			&__i {
				margin-bottom: $i + rpx !important;
			}
		}
		.m-ml-#{$i} {
			margin-left: $i + rpx;
			&__i {
				margin-left: $i + rpx !important;
			}
		}
		.m-mr-#{$i} {
			margin-right: $i + rpx;
			&__i {
				margin-right: $i + rpx !important;
			}
		}
		.m-pa-#{$i} {
			padding: $i + rpx;
			&__i {
				padding: $i + rpx !important;
			}
		}
		.m-pt-#{$i} {
			padding-top: $i + rpx;
			&__i {
				padding-top: $i + rpx !important;
			}
		}
		.m-pb-#{$i} {
			padding-bottom: $i + rpx;
			&__i {
				padding-bottom: $i + rpx !important;
			}
		}
		.m-pl-#{$i} {
			padding-left: $i + rpx;
			&__i {
				padding-left: $i + rpx !important;
			}
		}
		.m-pr-#{$i} {
			padding-right: $i + rpx;
			&__i {
				padding-right: $i + rpx !important;
			}
		}
	}
}

/* Flex布局 */

/* 总超集 */
.m-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
	&__i{
		display: flex !important;
	}
	/* 垂直主轴 */
	&.m-flex-column {
		flex-direction: column;
		&__i{
			flex-direction: column !important;
		}
	}

	/* 换行 */
	&.m-flex-wrap {
		flex-wrap: wrap;
		&__i{
			flex-wrap: wrap !important;
		}
	}

	/* 不换行 */
	&.m-flex-nowrap {
		flex-wrap: nowrap;
		&__i{
			flex-wrap: nowrap !important;
		}
	}

	/* 顶部对齐 */
	&.m-col-top {
		align-items: flex-start;
		&__i{
			align-items: flex-start !important;
		}
	}

	/* 垂直居中 */
	&.m-col-center {
		align-items: center;
		&__i{
			align-items: center !important;
		}
	}

	/* 底部对齐 */
	&.m-col-bottom {
		align-items: flex-end;
		&__i{
			align-items: flex-end !important;
		}
	}

	/* 如弹性盒子元素的行内轴与侧轴为同一条，则该值与 “flex-start” 等效。其它情况下，该值将参与基线对齐 */
	&.m-col-baseline {
		align-items: baseline;
		&__i{
			align-items: baseline !important;
		}
	}

	/* 如果指定侧轴大小的属性值为 “auto”，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 “min/max-width/height” 属性的限制 */
	&.m-col-stretch {
		align-items: stretch;
		&__i{
			align-items: stretch !important;
		}
	}

	/* 左边对齐 */
	&.m-row-left {
		justify-content: flex-start;
		&__i{
			justify-content: flex-start !important;
		}
	}

	/* 水平居中 */
	&.m-row-center {
		justify-content: center;
		&__i{
			justify-content: center !important;
		}
	}

	/* 右边对齐 */
	&.m-row-right {
		justify-content: flex-end;
		&__i{
			justify-content: flex-end !important;
		}
	}

	/* 水平两端对齐，项目之间的间隔都相等 */
	&.m-row-between {
		justify-content: space-between;
		&__i{
			justify-content: space-between !important;
		}
	}

	/* 水平每个项目两侧的间隔相等，所以项目之间的间隔比项目与父元素两边的间隔大一倍 */
	&.m-row-around {
		justify-content: space-around;
		&__i{
			justify-content: space-around !important;
		}
	}
}

/* 子元素空间分布 */
@for $i from 1 through 12 {
	.m-flex-#{$i} {
		flex: $i;
		&__i {
			flex: $i !important;
		}
	}
}
